<template>
  <div>
    <el-dialog v-model="props.visible" title="添加巡检点" width="400px" @close="closeDialog">
      <div style="height: 300px; padding: 10px 30px 30px 30px;">
        <div style="height: 100%;display: flex;flex-direction: column;  align-items: flex-start; justify-content: space-around;">
          <el-alert title="将选中的迁移到批量迁移到指定路线下：" type="success" />
          <el-select v-model="selectVal">
            <el-option v-for="item in selectOpions" :key="item.routeId" :value="item.routeId" :label="item.routeName"></el-option>
          </el-select>
          <el-button type="primary" :loading="buttonLoading" @click="onClickOK">确认迁移</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ApiGetInspectionRouteList, ApiMoveInspectionRoute } from '@/api/inspection/inspectionroute';

const props = defineProps({
  visible: { type: Boolean, default: false },
  params: { type: Object, default: () => {} }
});
const selectVal = ref('');
const selectOpions = ref<any>([]);
const buttonLoading = ref(false);
const getSelectOptions = async () => {
  const res = await ApiGetInspectionRouteList({ pageNum: 1, pageSize: 999 });
  selectOpions.value = res.rows;
};
watch(
  () => props.visible,
  async (val) => {
    if (val) {
      selectVal.value = '';
    }
  }
);

const emit = defineEmits(['closeDialog']);

const onClickOK = () => {
  if (selectVal.value === '') {
    return ElMessage.info('请选择路线名称');
  }
  buttonLoading.value = true;
  const params = Object.assign({}, props.params, { transferRouteId: selectVal.value });
  ApiMoveInspectionRoute(params).then((res: any) => {
    buttonLoading.value = false;
    if (res.code === 200) {
      closeDialog();
    } else {
      return ElMessage.error(res.msg);
    }
  }).finally(() => {
    buttonLoading.value = false;
  });
};

const closeDialog = () => {
  emit('closeDialog');
};
onMounted(() => {
  getSelectOptions();
});
</script>
